<template>
  <div class="mpvue-picker">
    <div :class="{ 'pickerMask': data.showPicker }" @click="maskClick" catchtouchmove="true"></div>
    <div class="mpvue-picker-content " :class="{ 'mpvue-picker-view-show': data.showPicker }">
      <div class="mpvue-picker__hd" catchtouchmove="true">
        <div class="mpvue-picker__action" @click="pickerCancel">取消</div>
        <div class="mpvue-picker__action" :style="{ color: themeColor }" @click="pickerConfirm">确定</div>
      </div>
      <picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="data.pickerValue"
        @change="pickerChange">
        <picker-view-column>
          <div class="picker-item" v-for="(item, index) in data.provinceDataList" :key="index">{{ item.label }}</div>
        </picker-view-column>
        <picker-view-column>
          <div class="picker-item" v-for="(item, index) in data.cityDataList" :key="index">{{ item.label }}</div>
        </picker-view-column>
        <picker-view-column>
          <div class="picker-item" v-for="(item, index) in data.areaDataList" :key="index">{{ item.label }}</div>
        </picker-view-column>
      </picker-view>
    </div>
  </div>
</template>

<script lang="ts" setup>
import provinceData from './city-data/province';
import cityData from './city-data/city';
import areaData from './city-data/area';
import { ref, reactive, toRefs, onMounted } from 'vue'
const data = reactive<{
  pickerValue: number[],
  provinceDataList: any[],
  cityDataList: any[],
  areaDataList: any[],
  showPicker: boolean
}>({
  pickerValue: [0, 0, 0],
  provinceDataList: [],
  cityDataList: [],
  areaDataList: [],
  showPicker: false
})

const props = withDefaults(defineProps<{
  pickerValueDefault: any
  themeColor?: string
}>(), {
  pickerValueDefault: [0, 0, 0],
  themeColor: '#1aad19'
})
const emits = defineEmits(['onCancel', 'onChange', 'onConfirm']);
onMounted(() => {
  let tempPickerValue = handPickValueDefault();
  data.provinceDataList = provinceData;
  data.cityDataList = cityData[props.pickerValueDefault[0]];
  data.areaDataList = areaData[props.pickerValueDefault[0]][props.pickerValueDefault[1]];
  setTimeout(() => {
    data.pickerValue = tempPickerValue;
  });
})
const show = () => {
  setTimeout(() => {
    data.showPicker = true;
  }, 0);
}
const maskClick = () => {
  pickerCancel();
}
const pickerCancel = () => {
  data.showPicker = false;
  _$emit('onCancel');
}
const pickerConfirm = (e: any) => {
  data.showPicker = false;
  _$emit('onConfirm');
}
const showPickerView = () => {
  data.showPicker = true;
}
const handPickValueDefault = () => {
  let tempPickerValue = props.pickerValueDefault;
  if (props.pickerValueDefault.toString() !== [0, 0, 0].toString()) {
    if (props.pickerValueDefault[0] > provinceData.length - 1) {
      tempPickerValue[0] = provinceData.length - 1;
    }
    if (props.pickerValueDefault[1] > cityData[tempPickerValue[0]].length - 1) {
      tempPickerValue[1] = cityData[tempPickerValue[0]].length - 1;
    }
    if (props.pickerValueDefault[2] > areaData[tempPickerValue[0]][tempPickerValue[1]].length - 1) {
      tempPickerValue[2] = areaData[tempPickerValue[0]][tempPickerValue[1]].length - 1;
    }
  }
  return tempPickerValue;
}
const pickerChange = (e: any) => {
  let changePickerValue = e.detail.value;
  if (data.pickerValue[0] !== changePickerValue[0]) {
    // 第一级发生滚动
    data.cityDataList = cityData[changePickerValue[0]];
    data.areaDataList = areaData[changePickerValue[0]][0];
    changePickerValue[1] = 0;
    changePickerValue[2] = 0;
  } else if (data.pickerValue[1] !== changePickerValue[1]) {
    // 第二级滚动
    data.areaDataList =
      areaData[changePickerValue[0]][changePickerValue[1]];
    changePickerValue[2] = 0;
  }
  data.pickerValue = changePickerValue;
  _$emit('onChange');
}
const _$emit = (emitName: any) => {
  let pickObj = {
    label: _getLabel(),
    value: data.pickerValue,
    cityCode: _getCityCode()
  };
  emits(emitName, pickObj);
}
const _getLabel = () => {
  let pcikerLabel =
    data.provinceDataList[data.pickerValue[0]].label +
    '-' +
    data.cityDataList[data.pickerValue[1]].label +
    '-' +
    data.areaDataList[data.pickerValue[2]].label;
  return pcikerLabel;
}
const _getCityCode = () => {
  return data.areaDataList[data.pickerValue[2]].value;
}
defineExpose({
  show
})
</script>

<style>
.pickerMask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.mpvue-picker-content {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: all 0.3s ease;
  transform: translateY(100%);
  z-index: 3000;
}

.mpvue-picker-view-show {
  transform: translateY(0);
}

.mpvue-picker__hd {
  display: flex;
  padding: 9px 15px;
  background-color: #fff;
  position: relative;
  text-align: center;
  font-size: 17px;
}

.mpvue-picker__hd:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #e5e5e5;
  color: #e5e5e5;
  transform-origin: 0 100%;
  transform: scaleY(0.5);
}

.mpvue-picker__action {
  display: block;
  flex: 1;
  color: #1aad19;
}

.mpvue-picker__action:first-child {
  text-align: left;
  color: #888;
}

.mpvue-picker__action:last-child {
  text-align: right;
}

.picker-item {
  text-align: center;
  line-height: 40px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mpvue-picker-view {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 238px;
  background-color: rgba(255, 255, 255, 1);
}</style>
